<template>
  <div class="page">
    <div class="c-main p20">
      <div class="c-aside clearfix">
        <!-- <el-button
          type="primary"
          class="fr btn"
          @click="rUploadQrcode"
          >上传二维码生成海报</el-button
        > -->
        <el-upload
          v-hasAuth:system_usercenterCreateQrcodeBill
          class="diy-uploadBtn fr"
          :action="uploadImgAjax.config.url"
          :headers="uploadImgAjax.config.headers"
          :multiple="false"
          name="file"
          ref="uploadImg"
          accept=".jpg, .gif, .jpeg, .png"
          :show-file-list="false"
          :disabled="uploadImgAjax.config.disabled"
          :on-success="rUploadImgSuc"
          :on-error="rUploadImgFail"
          :before-upload="rUploadImgBefore"
          :limit="1"
        >
          <el-button type="primary" class="fr btn"
            >上传二维码生成海报</el-button
          >
        </el-upload>
      </div>
      <div class="c-section">
        <div class="c-body">
          <div class="c-section mt20">
            <el-table :data="pageAjax.data" style="width: 100%">
              <el-table-column label="序号">
                <template slot-scope="scope">
                  <div class="">
                    {{ scope.$index + 1 || "无" }}
                  </div>
                </template>
              </el-table-column>
              <el-table-column label="二维码">
                <template slot-scope="scope">
                  <el-button
                    type="text"
                    size="small"
                    @click="rViewImg(scope.row.qrcodeUrl)"
                    >查看二维码</el-button
                  >
                </template>
              </el-table-column>
              <el-table-column label="海报H5链接浏览数">
                <template slot-scope="scope">
                  <div class="">
                    {{ scope.row.clickCount || "无" }}
                  </div>
                </template>
              </el-table-column>
              <el-table-column label="操作">
                <template slot-scope="scope">
                  <el-button
                    type="text"
                    size="small"
                    v-hasAuth:system_usercenterQrcodeBillView
                    @click="rShowBillDrawerCp(scope.row.id)"
                    >招募星探海报</el-button
                  >
                  <el-button
                    type="text"
                    size="small"
                    v-hasAuth:system_usercenterDeleteQrcode
                    @click="rDeleteQrcode(scope.row.id)"
                    >删除</el-button
                  >
                </template>
              </el-table-column>
            </el-table>
          </div>
        </div>
        <div class="c-footer">
          <div class="c-pagination">
            <el-pagination
              layout="prev, pager, next"
              @current-change="rPagingChange"
              @prev-click="rPagingChange"
              @next-click="rPagingChange"
              :current-page="pageAjax.paging.current"
              :total="pageAjax.paging.total"
            >
            </el-pagination>
          </div>
        </div>
      </div>
    </div>
    <!-- 图片预览插件 -->
    <yj-img-preview
      :pics="imgPreviewCp.data"
      :show="imgPreviewCp.config.show"
      @close="rCloseImgPreviewCp"
    >
    </yj-img-preview>
    <!-- billDrawerCp -->
    <el-drawer
      :title="billDrawerCp.config.title"
      :visible.sync="billDrawerCp.config.visible"
      :direction="billDrawerCp.config.direction"
      :size="billDrawerCp.config.size"
    >
      <div class="f-qrcodeDrawerCp f-billDrawerCp">
        <div class="n-content">
          <div class="scrollY full">
            <div class="n-billSelect">
              <el-row>
                <el-col :span="14" :offset="5">
                  <el-row>
                    <el-col :span="6"
                      ><el-button
                        class="btn-copy"
                        type="text"
                        disabled
                        style="display:block;text-align:right;width:100%;"
                        >请选择对应海报：</el-button
                      ></el-col
                    >
                    <el-col :span="18">
                      <el-select
                        v-model="billDrawerCp.data.billType"
                        placeholder="请选择"
                        style="display:block;"
                        @change="rSelectBillToCreate"
                      >
                        <el-option
                          v-for="item in billTypeListSupAjax.data"
                          :key="item.id"
                          :label="item.name"
                          :value="item.id"
                        >
                        </el-option>
                      </el-select>
                    </el-col>
                  </el-row>
                </el-col>
              </el-row>
            </div>
            <el-row v-if="billDrawerCp.data.billType">
              <el-col :span="14" :offset="5">
                <el-form ref="status" label-width="150px">
                  <el-row>
                    <el-col :span="15">
                      <el-form-item label="海报H5链接：">
                        <el-input
                          placeholder="渠道账号"
                          v-model="billAjax.data.posterH5Url"
                        ></el-input>
                      </el-form-item>
                    </el-col>
                    <el-col :span="9">
                      <el-button-group>
                        <el-button
                          :data-clipboard-text="billAjax.data.posterH5Url"
                          class="btn-copy"
                          >复制链接</el-button
                        >
                        <el-button
                          ><a
                            :href="billAjax.data.posterUrl"
                            target="_blank"
                            download="bill.jpg"
                            >保存海报为图片</a
                          ></el-button
                        >
                      </el-button-group>
                    </el-col>
                  </el-row>
                </el-form>
                <div class="mt20">
                  <img class="hFull" :src="billAjax.data.posterUrl" alt="" />
                </div>
              </el-col>
            </el-row>
          </div>
        </div>
      </div>
    </el-drawer>
  </div>
</template>
<script>
import { getQrcodeList, deleteQrcode, getBill } from "@/api/user.js";
import { getBillList } from "@/api/channel.js";
import Clipboard from "clipboard";
export default {
  name: "system_usercenterExclusiveBillList",
  data() {
    return {
      pageAjax: {
        btnDisabled: false,
        btnLoading: false,
        loading: false,
        lock: false,
        paging: {
          pages: 1, // 总页数
          current: 0, // 当前页
          total: 1, // 总数量
          pageSize: 10 // 每页数量
        },
        data: []
      },
      billTypeListSupAjax: {
        data: []
      },
      billAjax: {
        loading: false,
        data: {}
      },
      uploadImgAjax: {
        loading: false,
        config: {
          disabled: false,
          headers: {
            Authorization: ""
          },
          url: "/bs/qrcode/user/uploadQrCode"
        }
      },
      imgPreviewCp: {
        config: {
          show: false
        },
        data: []
      },
      billDrawerCp: {
        config: {
          title: "",
          visible: false,
          direction: "ttb",
          size: "80%"
        },
        data: {
          billType: "",
          channelId: 0
        }
      },
      clipboard: null
    };
  },
  created() {
    let _that = this;
    _that.uploadImgAjax.config.headers.Authorization =
      "bearer " + _that.$store.state.sid.access_token;
    _that.getPageData();
    _that.getBillList();
  },
  mounted() {
    let _that = this;
    _that.clipboard = new Clipboard(".btn-copy");

    _that.clipboard.on("success", function() {
      _that.$message.success("复制成功");
    });
    _that.clipboard.on("error", function() {
      _that.$message.error("复制失败");
    });
  },
  beforeDestroy() {
    this.clipboard.destroy();
  },
  methods: {
    /* 上传图片 */
    rUploadImgSuc(respData) {
      let _that = this;
      _that.uploadImgAjax.config.disabled = false;
      _that.uploadImgAjax.loading.close();
      _that.$refs.uploadImg.clearFiles();
      if (respData.code === _that.STATUS.success[0]) {
        _that.pageAjax.lock = false;
        _that.pageAjax.paging.current = 0;
        _that.getPageData();
      } else {
        _that.$message.error({
          message: respData.msg || "上传失败",
          onClose() {}
        });
      }
    },
    rUploadImgFail() {
      let _that = this;
      _that.uploadImgAjax.loading.close();
      _that.uploadImgAjax.config.disabled = false;
      _that.$refs.uploadImg.clearFiles();
      _that.$message.error({
        message: "上传错误，请查看网络或联系管理员",
        onClose() {}
      });
    },
    rUploadImgBefore() {
      let _that = this;
      _that.uploadImgAjax.loading = this.$loading({
        text: "上传中。。。",
        lock: true
      });
    },
    rViewImg(url) {
      this.imgPreviewCp.data.length = [];
      this.imgPreviewCp.data.push(url);
      this.imgPreviewCp.config.show = true;
    },
    rCloseImgPreviewCp() {
      this.imgPreviewCp.config.show = false;
    },
    rShowBillDrawerCp(id) {
      this.billDrawerCp.data.channelId = id;
      this.billDrawerCp.config.visible = true;
      this.billDrawerCp.data.billType = "";
    },
    rSelectBillToCreate(posterId) {
      let _that = this;
      if (_that.billAjax.loading) {
        _that.$message.error("正在生成中，请稍等");
        return;
      }

      _that.billAjax.loading = true;
      getBill({
        params: {
          userQrCodeId: _that.billDrawerCp.data.channelId,
          posterId: posterId
        }
      })
        .then(resp => {
          let respData = resp.data || {};
          if (respData.code === _that.STATUS.success[0]) {
            _that.billAjax.data = respData.data;
          } else {
            _that.$message.error(respData.msg);
          }
        })
        .finally(() => {
          _that.billAjax.loading = false;
        });
    },
    rDeleteQrcode(id) {
      let _that = this;
      this.$confirm("你确定要删除此数据?", "删除提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      })
        .then(() => {
          deleteQrcode({ id: id }).then(resp => {
            let respData = resp.data || {};

            if (respData.code === _that.STATUS.success[0]) {
              _that.$message.success(respData.msg || "删除成功");
              _that.pageAjax.paging.current =
                _that.pageAjax.paging.current > 0
                  ? _that.pageAjax.paging.current - 1
                  : 0;
              _that.getPageData();
            } else {
              _that.$message.error(respData.msg || "删除失败");
            }
          });
        })
        .catch(() => {});
    },
    rPagingChange(e) {
      let _that = this;
      _that.pageAjax.paging.current = e - 1;
      _that.getPageData();
    },
    getBillList() {
      let _that = this;

      getBillList({ params: { type: 2 } }).then(resp => {
        let respData = resp.data || {};
        if (respData.code === _that.STATUS.success[0]) {
          _that.billTypeListSupAjax.data = respData.data;
        }
      });
    },
    getPageData() {
      let _that = this;
      // let searchForm = _.cloneDeep(_that.alone.searchForm);
      let pageAjax = _that.pageAjax;

      if (pageAjax.loading || pageAjax.lock) {
        return;
      }

      // let data = { ...searchForm.data };
      let data = {};
      data.pageNo = _that.pageAjax.paging.current + 1;
      _that.pageAjax.loading = true;
      getQrcodeList({ params: data })
        .then(resp => {
          let respData = resp.data || {};

          if (respData.code === _that.STATUS.success[0]) {
            _that.pageAjax.data = respData.data.list;
            _that.pageAjax.paging = {
              pages: respData.data.pagination.pages,
              current: respData.data.pagination.current,
              total: respData.data.pagination.total,
              pageSize: respData.data.pagination.pageSize
            };
          } else {
            _that.$message.error(respData.msg || "获取失败");
          }
        })
        .finally(() => {
          _that.pageAjax.loading = false;
        });
    },
    rNavToChangePassword() {
      this.$router.push({ name: "system_usercenterSettingChangePassword" });
    },
    rNavToUserBill() {
      this.$router.push({ name: "system_usercenterExclusiveBill" });
    },
    rBack() {
      this.$router.go(-1);
    }
  }
};
</script>
<style lang="scss" scoped>
.page {
  .c-main {
    margin-top: 20px;
  }
  .c-pagination {
    margin-top: 20px;
    text-align: center;
  }
  .c-user {
    .c-avatar {
      img {
        width: 50px;
        height: 50px;
        margin-right: 10px;
        border-radius: 50%;
        box-shadow: 0 0 20px #eee;
      }
    }
  }
  .f-qrcodeDrawerCp {
    overflow: hidden;
    position: absolute;
    width: 100%;
    left: 0;
    top: 50px;
    bottom: 0;
    .n-content {
      height: 100%;
      padding: 30px 0;
      overflow: auto;
      box-sizing: border-box;
    }
    .n-note {
      line-height: 2;
      color: #999;
    }
  }
  .f-billDrawerCp {
    .n-content {
      padding: 50px 0 30px 0;
    }
    .n-billSelect {
      position: absolute;
      left: 0;
      top: 0;
      width: 100%;
      z-index: 5;
      border-bottom: 1px solid #eee;
      background-color: rgb(255, 255, 255);
    }
  }
}
</style>
